<template>
  <div class="camara">
    <!-- 摄像头画面 -->
    <div class="">
      <div class="camaraIn" id="id_local_video"></div>
      <!--      <div class="inSquareFace">-->
      <!--      </div>-->
      <canvas v-show="false"></canvas>
    </div>

    <!-- end -->
    <!-- 个人信息 -->
    <div class="inPersonInfo">
      <div class="">
        <div class="inTitle">
          识别到个人信息
        </div>
        <div class="inPhoto">
          <div class="thenCr">
            <img :src="userInfo.heard" class="photoIn">
          </div>
        </div>
        <div class="userName">
          {{ userInfo.name }}
        </div>
        <div class="userName">
          {{ userInfo.majors.title }}
        </div>
        <div class="userName">
          {{ userInfo.idcard }}
        </div>
        <div class="userName">
          <el-select @change="switchSelect" v-model="value" placeholder="请选择摄像头">
            <el-option
                style="font-size: 14px"
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled">
            </el-option>
          </el-select>
        </div>

      </div>
      <div v-if="!isPost" @click="startFace" class="begin">
        开始认证
      </div>
      <div v-if="isPost" class="begin1">
        认证中...
      </div>

    </div>
    <!-- end -->
  </div>
</template>

<script>
let livePusher = null;
let context1;
let deviceManager;
export default {
  data() {
    return {
      userInfo: null,
      isPost: false, //当前是否检测人脸
      options: [],
      value: ''
    }
  },
  mounted() {
    this.getCompetence();
  },
  methods: {

    startFace: function () {
      let random = parseInt(Math.random() * 2)
      let canvas1 = document.querySelector('canvas');
      context1 = canvas1.getContext('2d');
      let video = document.querySelector('video');
      canvas1.setAttribute("width", video.videoWidth);
      canvas1.setAttribute("height", video.videoHeight);
      context1.drawImage(video, -50, -20, video.videoWidth / 2.5, video.videoHeight / 2.5);
      let base64Img = canvas1.toDataURL('image/jpg');
      if (random >= 1) {
        this.faceSearch(base64Img);
      } else {
        this.faceVerify(base64Img);
      }

    },

    uploadImage: function (base64Img) {
      this.$axios.post('https://vvv.52ecode.cn/api/Upload/uploadFilesImg', {
        base: base64Img,
      }).then(res => {
        const {data, code} = res.data;
        if (code === 200) this.$ls.set('image0', data, 3 * 60 * 60 * 1000);

      })
    },

    faceSearch: function (base64Img) {
      this.isPost = true;
      this.$axios.post('https://vvv.52ecode.cn/api/v1.Face/faceSearch', {
        image: base64Img,
      }).then(res => {
        this.isPost = false;
        const {data, msg, code} = res.data;
        if (code === 400) return this.$message.error(msg);
        if (code === 200) {
          if (data.Results[0].Candidates[0].Score <= 80) {
            return this.$message.error("检测到不是本人认证");
          }
          this.uploadImage(base64Img)
          //成功
          this.$router.push('examing')
        }
      }).catch(() => {
        this.isPost = false;
      })
    },

    faceVerify: function (base64Img) {
      this.isPost = true;
      this.$axios.post('https://vvv.52ecode.cn/api/v1.Face/faceVerify', {
        image: base64Img,
        PersonId: this.userInfo.idcard
      }).then(res => {
        this.isPost = false;
        const {data, msg, code} = res.data;
        if (code === 400) return this.$message.error(msg);
        if (data.Score <= 80) {
          return this.$message.error("检测到不是本人认证");
        }
        this.uploadImage(base64Img)
        this.$router.push('examing')

      }).catch(() => {
        this.isPost = false;
      })
    },

    /**
     * 选择摄像头
     */
    switchSelect: function (e) {
      deviceManager.switchCamera(e);
    },

    getCompetence() {
      let _this = this;
      livePusher = new TXLivePusher();
      livePusher.setRenderView("id_local_video");
      document
          .getElementById("id_local_video")
          .getElementsByTagName("video")[0].muted = true; //关闭声音
      // 设置视频质量
      livePusher.setVideoQuality("480p");
      // 自定义设置帧率
      livePusher.setProperty("setVideoFPS", 25);
      livePusher.setProperty("setAudioSampleRate", 44100);
      // 打开摄像头
      livePusher.startCamera();

      // 获取设备列表
      deviceManager = livePusher.getDeviceManager();
      setTimeout(() => {
        deviceManager.getCurrentDevice('video').then((e) => {
          _this.value = e.deviceId;
        })
      }, 1500)
      deviceManager.getDevicesList('video').then(function (data) {
        data.forEach(function (device) {
          _this.options.push({
            value: device.deviceId,
            label: device.deviceName
          });
        });
      });

    },
  },
  created() {
    this.userInfo = JSON.parse(sessionStorage.getItem('InfoMation'));
    this.$message({
      message: '打开摄像头中',
      type: 'warning',
      duration: 1500
    });
  },
  destroyed() {
    // // 关闭摄像头
    livePusher.stopCamera();
    // 关闭麦克风
    livePusher.stopMicrophone();
  }

};
</script>

<style scoped>
.userName >>> input {
  width: 180px;
  padding-top: 16px;
  padding-bottom: 16px;
  font-size: 14px;
}

.el-input--suffix .el-input__inner {
  padding-right: 30px;
  font-size: 14px;
}

.inSquareFace {
  position: relative;
  top: -400px;
  text-align: center;
  border: solid 2px #FFFFFF;
  width: 220px;
  height: 220px;
  margin-left: 50%;
  transform: translateX(-50%);
}

.InSchool {
  text-align: center;
  margin-top: 24px;
  letter-spacing: 1pt;
  font-size: 20px;
}

.userName {
  font-size: 22px;
  margin-top: 24px;
  text-align: center;
  letter-spacing: 1pt;
  font-weight: bold;
  color: #4d78cc;
}

.thenCr {
  width: 190px;
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: solid 3px #b4accc;
}

.inPhoto {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

.photoIn {
  height: 160px;
  border-radius: 50%;
  width: 160px;
}

.inTitle {
  padding: 16px;
  background-color: #4d78cc;
  color: #ffff;
  border-radius: 8px 8px 0 0;
  font-size: 20px;
  letter-spacing: 1.2pt;
  text-align: center;
  cursor: pointer;
}

.inPersonInfo {
  width: 320px;
  height: 600px;
  background-color: #ffffff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-left: 24px;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.begin {
  font-size: 20px;
  background-color: #4d78cc;
  width: 160px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  margin-left: 50%;
  transform: translateX(-50%);
  border-radius: 30px;
  margin-bottom: 40px;
  cursor: pointer;
}

.begin1 {
  font-size: 20px;
  background-color: #9fb0cc;
  width: 160px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  margin-left: 50%;
  transform: translateX(-50%);
  border-radius: 30px;
  margin-bottom: 40px;
  cursor: pointer;
}

.begin:active {
  background-color: #9fb0cc;
}

.camara {
  margin-top: 48px;
  display: flex;
  width: auto;
  justify-content: center;
}

.camaraIn >>> video {
  width: 800px;
  height: 600px;
  /* object-fit: contain;
  display: block; */
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
